import React, { useState } from 'react';
import { Avatar, Card, Col, Divider, Row, Tag, Tabs, List, Typography, Tooltip, Button, Statistic, message, Empty } from 'antd';
import { createStyles } from 'antd-style';
import {
  UserOutlined,
  MailOutlined,
  PhoneOutlined,
  HomeOutlined,
  TeamOutlined,
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
  EditOutlined,
  SettingOutlined,
  GithubOutlined,
  WechatOutlined,
  QqOutlined,
  HeartTwoTone,
  TrophyOutlined,
  RocketOutlined,
  FireOutlined
} from '@ant-design/icons';

const { Title, Paragraph, Text } = Typography;
const { TabPane } = Tabs;

const useStyles = createStyles(({ token }) => ({
  pageContainer: {
    padding: '24px',
    backgroundColor: token.colorBgLayout,
    minHeight: 'calc(100vh - 48px)',
  },
  userInfoCard: {
    marginBottom: '24px',
    borderRadius: '12px',
    overflow: 'hidden',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
    transition: 'all 0.3s',
    '&:hover': {
      boxShadow: '0 6px 16px rgba(0, 0, 0, 0.1)',
      transform: 'translateY(-2px)',
    },
  },
  userInfoHeader: {
    display: 'flex',
    padding: '24px 32px',
    position: 'relative',
    overflow: 'hidden',
    backgroundImage: 'linear-gradient(to right, #8e2de2, #4a00e0)',
    '&::before': {
      content: '""',
      position: 'absolute',
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      backgroundImage: 'url("data:image/svg+xml,%3Csvg width=\'100%\' height=\'100%\' viewBox=\'0 0 800 800\' xmlns=\'http://www.w3.org/2000/svg\'%3E%3Cg fill=\'none\' stroke=\'rgba(255,255,255,0.1)\' stroke-width=\'1\'%3E%3Cpath d=\'M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63\'/%3E%3Cpath d=\'M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764\'/%3E%3Cpath d=\'M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880\'/%3E%3Cpath d=\'M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382\'/%3E%3Cpath d=\'M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269\'/%3E%3C/g%3E%3C/svg%3E")',
      opacity: 0.2,
    },
  },
  userAvatar: {
    width: '120px',
    height: '120px',
    border: '4px solid white',
    boxShadow: '0 8px 16px rgba(0, 0, 0, 0.1)',
    marginRight: '24px',
    transition: 'all 0.3s',
    '&:hover': {
      transform: 'rotate(5deg) scale(1.05)',
    },
  },
  userInfo: {
    color: 'white',
  },
  userName: {
    fontSize: '28px',
    fontWeight: 'bold',
    marginBottom: '8px',
    textShadow: '0 2px 4px rgba(0, 0, 0, 0.2)',
  },
  userTitle: {
    fontSize: '16px',
    marginBottom: '16px',
    opacity: 0.9,
  },
  userTags: {
    marginBottom: '16px',
  },
  userTag: {
    marginRight: '8px',
    marginBottom: '8px',
  },
  userContact: {
    display: 'flex',
    alignItems: 'center',
    marginBottom: '8px',
    '& svg': {
      marginRight: '8px',
    },
  },
  userSocial: {
    marginTop: '16px',
    '& button': {
      marginRight: '8px',
    },
  },
  statsCard: {
    marginBottom: '24px',
    borderRadius: '12px',
    overflow: 'hidden',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
    transition: 'all 0.3s',
    '&:hover': {
      boxShadow: '0 6px 16px rgba(0, 0, 0, 0.1)',
    },
  },
  statItem: {
    padding: '16px',
    textAlign: 'center',
    transition: 'all 0.3s',
    cursor: 'pointer',
    '&:hover': {
      backgroundColor: token.colorBgLayout,
      transform: 'translateY(-2px)',
    },
  },
  contentCard: {
    marginBottom: '24px',
    borderRadius: '12px',
    overflow: 'hidden',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.05)',
  },
  tabContent: {
    padding: '16px 0',
  },
  listItem: {
    transition: 'all 0.3s',
    '&:hover': {
      backgroundColor: token.colorBgLayout,
      transform: 'translateX(4px)',
    },
  },
  projectCard: {
    height: '100%',
    borderRadius: '12px',
    overflow: 'hidden',
    transition: 'all 0.3s',
    '&:hover': {
      boxShadow: '0 6px 16px rgba(0, 0, 0, 0.1)',
      transform: 'translateY(-4px)',
    },
  },
  projectCover: {
    height: '160px',
    backgroundSize: 'cover',
    backgroundPosition: 'center',
    position: 'relative',
    '&::after': {
      content: '""',
      position: 'absolute',
      bottom: 0,
      left: 0,
      right: 0,
      height: '60px',
      background: 'linear-gradient(to top, rgba(0,0,0,0.6), transparent)',
    },
  },
  projectTitle: {
    position: 'absolute',
    bottom: '12px',
    left: '16px',
    color: 'white',
    zIndex: 1,
    fontWeight: 'bold',
    fontSize: '18px',
    textShadow: '0 1px 2px rgba(0,0,0,0.5)',
  },
  projectContent: {
    padding: '16px',
  },
  teamMember: {
    display: 'flex',
    alignItems: 'center',
    padding: '12px 16px',
    borderRadius: '8px',
    transition: 'all 0.3s',
    '&:hover': {
      backgroundColor: token.colorBgLayout,
    },
  },
  teamMemberAvatar: {
    marginRight: '12px',
    transition: 'all 0.3s',
    '&:hover': {
      transform: 'scale(1.1)',
    },
  },
  teamMemberInfo: {
    flex: 1,
  },
  teamMemberName: {
    fontWeight: 'bold',
    marginBottom: '4px',
  },
  teamMemberTitle: {
    fontSize: '12px',
    color: token.colorTextSecondary,
  },
  sectionTitle: {
    marginTop: '8px',
    marginBottom: '16px',
    fontWeight: 'bold',
    fontSize: '18px',
    position: 'relative',
    paddingLeft: '12px',
    display: 'flex',
    alignItems: 'center',
    '&::before': {
      content: '""',
      position: 'absolute',
      left: 0,
      top: '50%',
      transform: 'translateY(-50%)',
      width: '4px',
      height: '18px',
      backgroundColor: token.colorPrimary,
      borderRadius: '2px',
    },
  },
  actionButton: {
    marginLeft: 'auto',
  },
}));

const UserCenter: React.FC = () => {
  const { styles } = useStyles();
  const [activeTabKey, setActiveTabKey] = useState('1');

  // 模拟用户数据
  const userData = {
    name: '王小明',
    avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
    title: '高级前端工程师',
    company: '蚂蚁科技集团',
    location: '杭州市',
    email: 'wangxiaoming@example.com',
    phone: '138****6666',
    tags: ['React', 'TypeScript', 'UI设计', '前端架构', '微前端'],
    bio: '热爱编程与设计，专注于用户体验与前端性能优化，喜欢尝试新技术，乐于分享。',
    github: 'https://github.com/xiaoming',
    wechat: 'wxm_dev',
    qq: '12345678',
  };

  // 模拟统计数据
  const statsData = [
    { key: 'projects', title: '项目数', value: 56, icon: <RocketOutlined /> },
    { key: 'followers', title: '粉丝数', value: 8168, icon: <TeamOutlined /> },
    { key: 'following', title: '关注数', value: 386, icon: <UserOutlined /> },
    { key: 'likes', title: '获赞数', value: 29876, icon: <LikeOutlined /> },
  ];

  // 模拟动态数据
  const activitiesData = [
    {
      id: 1,
      user: '王小明',
      action: '在项目 ',
      project: 'Ant Design Pro',
      event: ' 中提交了一个 Pull Request',
      time: '2小时前',
      avatar: userData.avatar,
    },
    {
      id: 2,
      user: '王小明',
      action: '发布了文章 ',
      project: '《如何优化React应用性能》',
      event: '',
      time: '昨天 14:36',
      avatar: userData.avatar,
    },
    {
      id: 3,
      user: '王小明',
      action: '回复了 ',
      project: '张三',
      event: ' 的评论: "这个方案很不错，我们可以一起讨论下具体实现"',
      time: '3天前',
      avatar: userData.avatar,
    },
    {
      id: 4,
      user: '王小明',
      action: '在项目 ',
      project: 'React Native UI Kit',
      event: ' 中创建了一个Issue',
      time: '1周前',
      avatar: userData.avatar,
    },
    {
      id: 5,
      user: '王小明',
      action: '获得了 ',
      project: '年度最佳贡献者',
      event: ' 称号',
      time: '2周前',
      avatar: userData.avatar,
    },
  ];

  // 模拟项目数据
  const projectsData = [
    {
      id: 1,
      title: 'Ant Design Pro',
      description: '企业级中后台前端/设计解决方案',
      cover: 'https://gw.alipayobjects.com/zos/rmsportal/uMfMFlvUuceEyPpotzlq.png',
      status: '进行中',
      percent: 78,
      members: 16,
      updatedAt: '2小时前',
    },
    {
      id: 2,
      title: 'React Native UI Kit',
      description: '移动端UI组件库，提供丰富的基础组件和业务组件',
      cover: 'https://gw.alipayobjects.com/zos/rmsportal/iXjVmWVHbCJAyqvDxdtx.png',
      status: '已完成',
      percent: 100,
      members: 8,
      updatedAt: '1天前',
    },
    {
      id: 3,
      title: '微前端框架',
      description: '基于qiankun的微前端解决方案，实现应用间的无缝集成',
      cover: 'https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png',
      status: '进行中',
      percent: 45,
      members: 12,
      updatedAt: '3天前',
    },
    {
      id: 4,
      title: '低代码平台',
      description: '通过拖拽式操作快速生成应用，提高开发效率',
      cover: 'https://gw.alipayobjects.com/zos/rmsportal/uVZonEtjWwmUZPBQfycs.png',
      status: '规划中',
      percent: 20,
      members: 5,
      updatedAt: '1周前',
    },
  ];

  // 模拟团队成员数据
  const teamData = [
    {
      id: 1,
      name: '张三',
      title: '产品经理',
      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
    },
    {
      id: 2,
      name: '李四',
      title: 'UI设计师',
      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/cnrhVkzwxjPwAaCfPbdc.png',
    },
    {
      id: 3,
      name: '王五',
      title: '后端工程师',
      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/gaOngJwsRYRaVAuXXcmB.png',
    },
    {
      id: 4,
      name: '赵六',
      title: '测试工程师',
      avatar: 'https://gw.alipayobjects.com/zos/rmsportal/WhxKECPNujWoWEFNdnJE.png',
    },
    {
      id: 5,
      name: '钱七',
      title: '运维工程师',
      avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
    },
  ];

  // 处理关注按钮点击
  const handleFollow = () => {
    message.success('关注成功！');
  };

  // 处理编辑资料按钮点击
  const handleEdit = () => {
    message.info('编辑个人资料');
  };

  // 处理设置按钮点击
  const handleSettings = () => {
    message.info('账号设置');
  };

  return (
    <div className={styles.pageContainer}>
      {/* 用户信息卡片 */}
      <Card className={styles.userInfoCard} bordered={false}>
        <div className={styles.userInfoHeader}>
          <Avatar
            src={userData.avatar}
            size={120}
            icon={<UserOutlined />}
            className={styles.userAvatar}
          />
          <div className={styles.userInfo}>
            <div className={styles.userName}>{userData.name}</div>
            <div className={styles.userTitle}>
              {userData.title} @ {userData.company}
            </div>
            <div className={styles.userTags}>
              {userData.tags.map((tag) => (
                <Tag key={tag} color="blue" className={styles.userTag}>
                  {tag}
                </Tag>
              ))}
            </div>
            <div className={styles.userContact}>
              <HomeOutlined /> {userData.location}
            </div>
            <div className={styles.userContact}>
              <MailOutlined /> {userData.email}
            </div>
            <div className={styles.userContact}>
              <PhoneOutlined /> {userData.phone}
            </div>
            <div className={styles.userSocial}>
              <Button
                type="primary"
                icon={<HeartTwoTone twoToneColor="#eb2f96" />}
                onClick={handleFollow}
              >
                关注
              </Button>
              <Button icon={<EditOutlined />} onClick={handleEdit}>
                编辑资料
              </Button>
              <Button icon={<SettingOutlined />} onClick={handleSettings}>
                设置
              </Button>
              <Tooltip title="Github">
                <Button shape="circle" icon={<GithubOutlined />} />
              </Tooltip>
              <Tooltip title="微信">
                <Button shape="circle" icon={<WechatOutlined />} />
              </Tooltip>
              <Tooltip title="QQ">
                <Button shape="circle" icon={<QqOutlined />} />
              </Tooltip>
            </div>
          </div>
        </div>
        <div style={{ padding: '24px' }}>
          <Paragraph>{userData.bio}</Paragraph>
        </div>
      </Card>

      {/* 统计数据卡片 */}
      <Card className={styles.statsCard} bordered={false}>
        <Row gutter={0}>
          {statsData.map((stat) => (
            <Col key={stat.key} xs={12} sm={12} md={6} lg={6}>
              <div className={styles.statItem}>
                <div style={{ fontSize: '24px', color: '#1890ff', marginBottom: '8px' }}>
                  {stat.icon}
                </div>
                <Statistic title={stat.title} value={stat.value} />
              </div>
            </Col>
          ))}
        </Row>
      </Card>

      {/* 内容区域 */}
      <Row gutter={24}>
        <Col xs={24} sm={24} md={16} lg={16} xl={16}>
          <Card className={styles.contentCard} bordered={false}>
            <Tabs activeKey={activeTabKey} onChange={setActiveTabKey}>
              <TabPane tab="动态" key="1">
                <div className={styles.tabContent}>
                  <div className={styles.sectionTitle}>
                    <FireOutlined style={{ marginRight: '8px' }} /> 最近动态
                    <Button type="link" className={styles.actionButton}>
                      查看全部
                    </Button>
                  </div>
                  <List
                    itemLayout="horizontal"
                    dataSource={activitiesData}
                    renderItem={(item) => (
                      <List.Item className={styles.listItem}>
                        <List.Item.Meta
                          avatar={<Avatar src={item.avatar} />}
                          title={
                            <div>
                              <Text strong>{item.user}</Text>
                              <Text>{item.action}</Text>
                              <Text strong>{item.project}</Text>
                              <Text>{item.event}</Text>
                            </div>
                          }
                          description={item.time}
                        />
                      </List.Item>
                    )}
                  />
                </div>
              </TabPane>
              <TabPane tab="项目" key="2">
                <div className={styles.tabContent}>
                  <div className={styles.sectionTitle}>
                    <RocketOutlined style={{ marginRight: '8px' }} /> 进行中的项目
                    <Button type="link" className={styles.actionButton}>
                      查看全部
                    </Button>
                  </div>
                  <Row gutter={[24, 24]}>
                    {projectsData.map((project) => (
                      <Col key={project.id} xs={24} sm={12} md={12} lg={12}>
                        <Card className={styles.projectCard} bordered={false} hoverable>
                          <div
                            className={styles.projectCover}
                            style={{ backgroundImage: `url(${project.cover})` }}
                          >
                            <div className={styles.projectTitle}>{project.title}</div>
                          </div>
                          <div className={styles.projectContent}>
                            <Paragraph ellipsis={{ rows: 2 }}>{project.description}</Paragraph>
                            <div style={{ marginTop: '12px', display: 'flex', justifyContent: 'space-between' }}>
                              <Tag color={project.status === '已完成' ? 'green' : project.status === '进行中' ? 'blue' : 'orange'}>
                                {project.status}
                              </Tag>
                              <div>
                                <TeamOutlined style={{ marginRight: '4px' }} />
                                {project.members} 成员
                              </div>
                            </div>
                          </div>
                        </Card>
                      </Col>
                    ))}
                  </Row>
                </div>
              </TabPane>
              <TabPane tab="应用" key="3">
                <div className={styles.tabContent}>
                  <Empty description="暂无应用数据" />
                </div>
              </TabPane>
            </Tabs>
          </Card>
        </Col>
        <Col xs={24} sm={24} md={8} lg={8} xl={8}>
          <Card className={styles.contentCard} bordered={false}>
            <div className={styles.sectionTitle}>
              <TrophyOutlined style={{ marginRight: '8px' }} /> 团队成员
              <Button type="link" className={styles.actionButton}>
                管理团队
              </Button>
            </div>
            <div>
              {teamData.map((member) => (
                <div key={member.id} className={styles.teamMember}>
                  <Avatar src={member.avatar} className={styles.teamMemberAvatar} />
                  <div className={styles.teamMemberInfo}>
                    <div className={styles.teamMemberName}>{member.name}</div>
                    <div className={styles.teamMemberTitle}>{member.title}</div>
                  </div>
                  <Button size="small" type="link">
                    <MessageOutlined />
                  </Button>
                </div>
              ))}
            </div>
          </Card>

          <Card className={styles.contentCard} bordered={false} style={{ marginTop: '24px' }}>
            <div className={styles.sectionTitle}>
              <StarOutlined style={{ marginRight: '8px' }} /> 收藏文章
              <Button type="link" className={styles.actionButton}>
                查看全部
              </Button>
            </div>
            <List
              itemLayout="horizontal"
              dataSource={[
                { id: 1, title: '如何优化React应用性能', likes: 256, comments: 32 },
                { id: 2, title: 'TypeScript高级类型技巧', likes: 198, comments: 24 },
                { id: 3, title: '微前端架构实践与思考', likes: 312, comments: 45 },
                { id: 4, title: '前端工程化最佳实践', likes: 178, comments: 18 },
              ]}
              renderItem={(item) => (
                <List.Item className={styles.listItem}>
                  <List.Item.Meta
                    title={item.title}
                    description={
                      <div>
                        <LikeOutlined style={{ marginRight: '4px' }} />
                        {item.likes}
                        <MessageOutlined style={{ marginLeft: '12px', marginRight: '4px' }} />
                        {item.comments}
                      </div>
                    }
                  />
                </List.Item>
              )}
            />
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default UserCenter;
